<template>
	<view class="content">
		<view class="top-box">
			<input class="item input" type="text" v-model="userFrom.text" placeholder="输入标题" />
			<input class="item input" type="text" v-model="userFrom.path" placeholder="输入链接" />
			<view class="btn" @click="clickSave()">
				保存
			</view>
		</view>
		<view class="setting-list">
			<view class="item" @click="gotoXiugai()">
				<view class="left">
					修改地址
				</view>
				<view class="right">
					>
				</view>
			</view>
			<view class="item" @click="gotoDeleteView()">
				<view class="left">
					删除地址
				</view>
				<view class="right">
					>
				</view>
			</view>
			<view class="item" @click="deleteData()">
				<view class="left">
					清除所有地址
				</view>
				<view class="right">
					>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		getTime
	} from '@/tools/tools.js'


	const userFrom = reactive({
		text: '',
		path: '',
		index: 0
	})
	const oldJson = ref([]);

	const deleteData = () => {

		uni.removeStorage({
			key: 'data',
			success(res) { 
				console.log('移除成功');
			}
		})
		uni.showToast({
			title: '清除成功',
			icon: 'success'
		});
	}

	const gotoXiugai = () => {
		uni.navigateTo({
			url: '/pages/setting/setting-list/setting-list'
		})
	}

	const gotoDeleteView = () => {
		uni.navigateTo({
			url: '/pages/setting/setting-list/delete-path'
		})
	}


	const clickSave = () => {
		let data = {
			text: userFrom.text,
			path: userFrom.path,
			index: getTime()
		}

		if (data.text == '') {
			uni.showModal({
				title: '真的不输入标题吗~'
			})
		} else if (data.path == '') {
			uni.showModal({
				title: '真的不输入地址吗~'
			})
		} else {
			let clash = oldJson.value;

			if (Array.isArray(clash)) {
				clash.push(data);
			} else {
				clash = [data];
			}
			oldJson.value = clash;

			uni.setStorageSync('data', JSON.stringify(clash));
			uni.showToast({
				title: '保存成功',
				icon: 'success'
			});
		}
	}

	onLoad(() => {
		uni.getStorage({
			key: "data",
			success(res) {
				oldJson.value = JSON.parse(res.data)
				console.log('获取成功:', oldJson.value);
			},
			fail(err) {
				oldJson.value = []
			}
		})
	})
</script>

<style lang="scss" scoped>
	.content {
		padding: 14rpx;

		.top-box {
			padding-bottom: 80rpx;

			.item {
				margin-bottom: 30rpx;
			}

			.input {
				padding: 30rpx;
				border-bottom: 1px solid gainsboro;
			}

			.btn {
				text-align: center;
				padding: 20px;
				background-color: #005BAB;
				color: white;
				border-radius: 10rpx;
			}
		}

		.setting-list {
			.item {

				display: flex;
				justify-content: space-between;
				padding: 40rpx 40rpx 40rpx 40rpx;
				border-bottom: 1px solid gainsboro;
				color: #797979;

				.left {
					line-height: 40rpx;
				}
			}
		}
	}
</style>